<!-- src/components/Calendar/CalendarHeader.vue -->
<template>
  <header class="header">
    <div class="header-left">
      <!-- 汉堡菜单 -->
      <el-button 
        class="menu-btn" 
        @click="$emit('toggle-sidebar')"
        :icon="sidebarCollapsed ? Expand : Fold"
      />
        
      <!-- 日历图标和标题 -->
      <div class="calendar-title">
        <el-icon class="calendar-icon"><Calendar /></el-icon>
        <span class="title-text">日历</span>
      </div>
      
      <!-- 今天按钮 -->
      <el-button class="today-btn" @click="$emit('go-today')">今天</el-button>
      
      <!-- 日期切换箭头 -->
      <div class="date-nav">
        <el-button class="nav-btn" @click="$emit('previous-period')" :icon="ArrowLeft" />
        <el-button class="nav-btn" @click="$emit('next-period')" :icon="ArrowRight" />
      </div>
      
      <!-- 当前日期显示 -->
      <div class="current-date">
        <div class="date-main">{{ currentDisplayDate }}</div>
        <div class="date-lunar">{{ currentLunarDate }}</div>
      </div>
    </div>
    
    <div class="header-right">
      <!-- 搜索 -->
      <el-button class="icon-btn" @click="$emit('show-search')" :icon="Search" />
      
      <!-- 帮助 -->
      <el-button class="icon-btn" @click="$emit('show-help')" :icon="QuestionFilled" />
      
      <!-- 设置 -->
      <el-button class="icon-btn" @click="$emit('show-settings')" :icon="Setting" />
      
      <!-- 视图切换 -->
      <el-select v-model="currentView" class="view-select" @change="$emit('change-view', $event)">
        <el-option label="年" value="year" />
        <el-option label="月" value="month" />
        <el-option label="周" value="week" />
        <el-option label="日" value="day" />
      </el-select>
      
      <!-- 日历/任务切换按钮 -->
      <div class="capsule-button">
        <button class="capsule-item capsule-left" @click="$emit('go-calendar-page')">
          <el-icon><Calendar /></el-icon>
        </button>
        <button class="capsule-item capsule-right" @click="$emit('go-task-page')">
          <el-icon><Check /></el-icon>
        </button>
      </div>
      
      <!-- 网格图标 -->
      <el-button class="icon-btn" @click="$emit('toggle-grid')" :icon="Grid" />
      
      <!-- 用户头像 -->
      <div class="user-avatar" @click="$emit('show-user-menu')">
        <img src="@/assets/img1.jpg" alt="用户头像" />
      </div>
    </div>
  </header>
</template>


<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { 
  Calendar, 
  Search, 
  QuestionFilled, 
  Setting, 
  Check, 
  Grid, 
  ArrowLeft, 
  ArrowRight,
  Expand,
  Fold
} from '@element-plus/icons-vue'

interface Props {
  sidebarCollapsed: boolean
  currentView: string
  selectedDate: Date
}

const props = defineProps<Props>()

const emit = defineEmits([
  'toggle-sidebar',
  'go-today',
  'previous-period',
  'next-period',
  'show-search',
  'show-help',
  'show-settings',
  'change-view',
  'go-calendar-page',
  'go-task-page',
  'toggle-grid',
  'show-user-menu'
])

// 使用computed确保与父组件同步
const currentView = computed({
  get: () => props.currentView,
  set: (value) => emit('change-view', value)
})

// 监听props.currentView的变化 确保同步
watch(() => props.currentView, (newView) => {
  // 不用额外操作 computed已经处理了同步
}, { immediate: true })

const lunarMonths = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月']
const lunarDays = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
                  '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
                  '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十']

const currentDisplayDate = computed(() => {
  return `${props.selectedDate.getFullYear()}年${props.selectedDate.getMonth() + 1}月${props.selectedDate.getDate()}日`
})

const currentLunarDate = computed(() => {
  const month = lunarMonths[props.selectedDate.getMonth()]
  const day = lunarDays[props.selectedDate.getDate() - 1] || '三十'
  return `农历${month}${day}`
})
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-btn {
  border: none;
  background: none;
  font-size: 18px;
  color: #666;
}

.calendar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.calendar-icon {
  font-size: 20px;
  color: #1976d2;
}

.today-btn {
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
}

.date-nav {
  display: flex;
  gap: 4px;
}

.nav-btn {
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  padding: 6px 8px;
}

.current-date {
  margin-left: 16px;
}

.date-main {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.date-lunar {
  font-size: 12px;
  color: #666;
}

.icon-btn {
  border: none;
  background: none;
  color: #666;
  font-size: 16px;
}

.capsule-button {
  display: inline-flex;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: white;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.capsule-item {
  border: none;
  background: none;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  outline: none;
  position: relative;
}

.capsule-item:first-child::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: #ddd;
}

.capsule-item:hover {
  background: #f5f5f5;
}

.capsule-item .el-icon {
  font-size: 16px;
  color: #666;
}

.view-select {
  width: 80px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .header {
    padding: 8px 16px;
  }
  
  .header-left {
    gap: 8px;
  }
  
  .header-right {
    gap: 8px;
  }
}
</style>